<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>按键事件</title>
    <link rel="stylesheet" href="./keycode.css" />
  </head>
  <body>
    <div id="img">
      <div class="hand"></div>
      <div id="body"></div>
      <div id="lleg"></div>
      <div id="rleg"></div>
      <div class="eye"></div>
      <div class="line"></div>
    </div>
    <div class="back"></div>
    <button class="light">浅色模式</button>
    <button class="dark">深色模式</button>
    <script src="./keycode.js"></script>
    <script>
      let light = document.querySelector(".light");
      let dark = document.querySelector(".dark");
      dark.addEventListener("click", function () {
        document.body.style.backgroundColor = "black";
      });
      light.addEventListener("click", function () {
        document.body.style.backgroundColor = "white";
      });
      let img = document.querySelector("#img");
      index1 = 0;
      index2 = 0;
      index3 = 0;
      index4 = 0;
      let lleg = document.getElementById("lleg");
      let rleg = document.querySelector("#rleg");
      document.addEventListener("keydown", function (e) {
        if (e.keyCode == 38 && index1 * -10 + index2 * 10 >= -160) {
          index1++;
          img.style.top = index1 * -10 + index2 * 10 + "px";
        }
        console.log(img.style.top);
        if (e.keyCode == 37 && index3 * -10 + index4 * 10 >= -260) {
          index3++;
          img.style.left = index3 * -10 + index4 * 10 + "px";
        }
        console.log(img.style.left);
        if (e.keyCode == 39 && index4 * 10 - index3 * 10 <= 330) {
          index4++;
          img.style.left = index4 * 10 - index3 * 10 + "px";
        }
        if (e.keyCode == 40 && index2 * 10 - index1 * 10 <= 60) {
          index2++;
          img.style.top = index2 * 10 - index1 * 10 + "px";
        }
        lleg.style.transform = `rotate(30deg)`;
        rleg.style.transform = `rotate(-30deg)`;
      });
      setInterval(function () {
        lleg.style.transform = `rotate(0deg)`;
        rleg.style.transform = `rotate(0deg)`;
      }, 100);
    </script>
  </body>
</html>
